<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="addOne">+1</button>
    <hr />
    <img
      v-for="(item, index) in dogList"
      :src="item"
      alt="fruit"
      :key="index"
    />
    <button @click="comeOn">再来一只修勾</button>
  </div>
</template>

<script setup name="Person" lang="ts">
import { ref, reactive } from "vue";
import axios from "axios";

//https://dog.ceo/api/breed/sheepdog/images/random

//https://dog.ceo/api/breed/poodle/images/random

//https://dog.ceo/api/breed/boxer/images/random

//https://images.dog.ceo/breeds/poodle-miniature/n02113712_2451.jpg

let sum = ref(0);
let dogList = reactive([
  "https://images.dog.ceo/breeds/boxer/n02108089_1355.jpg",
  "https://images.dog.ceo/breeds/boxer/n02108089_2831.jpg",
]);

function addOne() {
  sum.value += 1;
}

async function comeOn() {
  try {
    let result = await axios.get(
      "https://dog.ceo/api/breed/boxer/images/random"
    );
    console.log(result.data);
    dogList.push(result.data.message); //向 dogList 中添加数据，push()方法可以往数据中添加数据
  } catch (error) {
    alert(error);
  }
}
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
img {
  height: 100px;
  margin-right: 10px;
}
</style>